<template>
  <div class="d-flex flex-column h-100">
    <!-- <Loader v-if="isLoading" text="拼命加载中" bgc="rgba(0,0,0,.4)" /> -->
    <global-header :user="currentUser" />
    <div class="main">
      <router-view />
    </div>
    <footer class="text-center footer py-4 text-secondary bg-light mt-auto">
      <small>
        <ul class="list-inline mn-0">
          <li class="list-inline-item">item</li>
          <li class="list-inline-item">item</li>
          <li class="list-inline-item">item</li>
          <li class="list-inline-item">item</li>
        </ul>
      </small>
    </footer>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import GlobalHeader from '@/components/GlobalHeader';

export default {
  name: 'App',
  components: { GlobalHeader },
  setup() {
    const store = useStore();
    const currentUser = computed(() => store.state.user);
    console.log(currentUser, 'user.nickName');
    return {
      currentUser,
    };
  },
};
</script>

<style lang="scss">
.main {
  min-height: calc(100vh - 85px - 94px);
}
</style>
